<style>
</style>
<template>
    <div class="model-box margin-auto form-group setwidth login">
        <h4 class="h-group"><i>注册</i></h4>
        <div v-if="showerr" class="input-group err-box">{{showerr}}</div>
        <input class="input-group" @keyup="checkMobile" v-model="param['username']" placeholder="手机号码" type="text">
        <div class="group-input">
            <input class="inp-qc-10" type="text" v-model="checkCode"placeholder="请输入短信验证码">
            <span class=""  v-if="ok" v-on:click="getCheckCode"><a href="javascript:void(0)">{{checkMsg}}</a></span>
            <span class="on" v-on:click="alertWarn" v-else>{{checkMsg}}</span>
        </div>
        <p class="text-min marggin-bt">密码长度为8~30个字符，需要包含字母和数字</p>
        <p><span v-for="it in btnlist" track-by="$index" class="btn-o" v-bind:class="{app_color_c_back:it==0,app_color_r_back:it==1,app_color_y_back:it==2,app_color_g_back:it==3}"></span></p>
        <input class="input-group" placeholder="密码"  @keyup="checkpassword" v-model="param['password']" type="password">
        <input class="input-group" placeholder="确认密码" @keyup="checkpassword" v-model="confirmPassword" type="password">
        <p class="clear-fix text-min"><i class="margin-r-5 check selected iconfont icon-duihao"></i><span>下次自动登录</span> <a href="" class="rig">忘记密码了？</a></p>
        <button class="btn btn-b margin-bt margin-t" style="margin-top: 40px">确定</button>
        <p class="text-min text-center margin-t"><a href="">返回登录</a></p>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                btnlist:[1,1,1],
                showerr:'',
                param:{},
                checkMsg:'获取验证码',
                backTime:60,
                confirmPassword:'',
                reg:REG.regs,
                err:REG.errs,
                ok:false,
            }
        },
        methods: {
            checkMobile: function(){
                if(/^1\d{10}$/.test(this.telephone)){
                    this.ok = true;
                }else{
                    this.ok = false;
                }
            },
            alertWarn: function(){
                VIE.showToast('请先输入正确的手机号');
            },
            checkpassword: function(){
                if(this.confirmPassword != this.param['password']&&this.confirmPassword){
                    this.showerr = this.err.recheckErr;
                }else{
                    this.showerr = "";
                }
            },
            getCheckCode: function(){
                var myDate = new Date().getTime(),
                        _this = this;

                if(!localStorage.getItem("endTime")||myDate > localStorage.getItem("endTime")){
                    if(/^1\d{10}$/.test(_this.telephone)){
                        VIE.postJ(HTTP_SERVER+'checkcode',{'username':_this.param['username']},this,this.checkSuccess,this.checkError);
                    }else{
                        VIE.showToast('请输入正确的手机号');
                    }
                }
                if(localStorage.getItem("endTime")-myDate >0){
                    VIE.showToast("1分钟内不能连续请求验证码，请稍后再试");
                }
            },
            checkError: function(){
                VIE.showToast("网络连接失败,请稍后再试!",1500);
            },
            checkSuccess: function(){
                var myDate = new Date().getTime(),
                        _this = this,
                        showTime,
                        time;
                localStorage.setItem("endTime",(myDate + 60000));
                _this.checkMsg = '剩余'+ (_this.backTime - 1) +'秒';
                time = setInterval(function(){
                    showTime = Math.floor((localStorage.getItem("endTime") - new Date().getTime()) / 1000);
                    if(showTime < 0){
                        clearInterval(time);
                        _this.checkMsg = '重新获取';
                    }else{
                        _this.checkMsg = '剩余'+showTime+'秒';
                    }
                },1000);
            }
        },
        ready: function() {
        }
    };

</script>